<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 校园活动报名平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 960px;
        }
        .header {
            padding: 2rem 0;
            text-align: center;
        }
        .card {
            margin-bottom: 1.5rem;
        }
        .footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
            color: #777;
            border-top: 1px solid #e5e5e5;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>校园活动报名平台</h1>
            <p class="lead">创建您的账号，开始参与校园活动</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">用户注册</h5>
                        <form id="registerForm">
                            <div class="mb-3">
                                <label for="registerUsername" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="registerUsername" required>
                            </div>
                            <div class="mb-3">
                                <label for="registerPassword" class="form-label">密码</label>
                                <input type="password" class="form-control" id="registerPassword" required>
                            </div>
                            <div class="mb-3">
                                <label for="registerName" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="registerName" required>
                            </div>
                            <div class="mb-3">
                                <label for="registerEmail" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="registerEmail">
                            </div>
                            <div class="mb-3">
                                <label for="registerPhone" class="form-label">手机号</label>
                                <input type="tel" class="form-control" id="registerPhone">
                            </div>
                            <div class="mb-3">
                                <label for="registerStudentId" class="form-label">学号</label>
                                <input type="text" class="form-control" id="registerStudentId">
                            </div>
                            <button type="submit" class="btn btn-success">注册</button>
                        </form>
                        <div class="mt-3">
                            <p>已有账号？<a href="login.html">立即登录</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>© 2025 校园活动报名平台</p>
        </footer>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        const API_BASE_URL = '/api';

        // 页面加载完成后执行
        $(document).ready(function() {
            // 注册表单提交事件
            $('#registerForm').on('submit', function(e) {
                e.preventDefault();
                register();
            });
        });

        // 注册
        function register() {
            const registerRequest = {
                username: $('#registerUsername').val(),
                password: $('#registerPassword').val(),
                name: $('#registerName').val(),
                email: $('#registerEmail').val(),
                phone: $('#registerPhone').val(),
                studentId: $('#registerStudentId').val()
            };

            $.ajax({
                url: API_BASE_URL + '/users/register',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(registerRequest),
                success: function(response) {
                    if (response.code === 200) {
                        alert('注册成功，请登录');
                        window.location.href = 'login.html';
                    } else {
                        alert('注册失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('注册失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }
    </script>
</body>
</html> 